<template>
  <a-modal
    title="留言"
    width="80%"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
       <s-table
        ref="rostertable"
        :columns="columns"
        :data="loadData"
        :alert="options.alert"
        :rowKey="(record) => record.id"
        :rowSelection="options.rowSelection"
      >
        <span slot="isPublish" slot-scope="text, record">
          <span slot="isPublish" >
            <p style="">{{record.isPublish?'发布':'屏蔽'}}</p>
          </span>
        </span>
        <span slot="action" slot-scope="text, record">
          <!-- <a v-if="hasPerm('classdynamic:edit')" @click="checkMsg(record)">查看留言</a>
          <a-divider type="vertical" v-if="hasPerm('classdynamic:edit') & hasPerm('classdynamic:shield')"/> -->
          <a-popconfirm v-if="hasPerm('classdynamic:shield')" placement="topRight" :title="record.isPublish?'确认屏蔽？':'确认恢复？'" @confirm="() => pingbi(record)">
            <a>{{record.isPublish?'屏蔽':'恢复'}}</a>
          </a-popconfirm>
          <a-divider type="vertical"/>
          <a-popconfirm  placement="topRight" title="确认删除？" @confirm="() => singleDelete(record)">
            <a>删除</a>
          </a-popconfirm>
        </span>
      </s-table>

    </a-spin>
  </a-modal>
</template>

<script>
import { STable, XCard, XDown } from '@/components'
  import { leaveMessageList, leaveMessagePage, leaveMessageDelete, leaveMessageShiftTransfers } from '@/api/modular/garden/classDynamicApi'
  import moment from 'moment';
  export default {
    components: {
    XDown,
    XCard,
    STable,
    },
    data () {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 18 }
        },
        selectedRowKeys: [],
        selectedRows: [],
        options: {
          alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
          rowSelection: {
            selectedRowKeys: this.selectedRowKeys,
            onChange: this.onSelectChange
          }
        },
        columns: [
          {
            title: '留言内容',
            dataIndex: 'leaveMessageContent'
          },
          {
            title: '留言时间',
            dataIndex: 'leaveMessageTime'
          },
          {
            title: '姓名',
            dataIndex: 'leaveMessageUserName'
          },
          {
            title: '状态',
            dataIndex: 'isPublish',
            scopedSlots: { customRender: 'isPublish' }
          }
        ],
        classDynamicId: '',
        visible: false,
        confirmLoading: false,
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          return leaveMessagePage(Object.assign(parameter, {ClassDynamicId: this.classDynamicId})).then((res) => {
            return res.data
          })
        },
        tableData: [],
      }
    },
    created(){
      this.columns.push({
        title: '操作',
        width: '120px',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' }
      })
    },
    methods: {
      // 初始化方法
      show (record) {
        this.classDynamicId = record.id;
        this.tableData = record.leaveMessages;
        this.visible = true;
        this.$nextTick(() => {
            this.$refs.rostertable.refresh(true)
        })
      },
      handleSubmit () {
                this.visible = false;
      },
      handleCancel () {
        this.visible = false
      },
      batchExport(){

      },
      pingbi(record){
        const _data = {
          leaveMessageId: record.id,
          isPublish: !record.isPublish
        }
        leaveMessageShiftTransfers(_data).then(res => {
            if (res.success) {
              this.$message.success('操作成功')
              this.$refs.rostertable.refresh(true)
            } else {
              this.$message.error('操作失败：' + res.message)
            }
        }).catch((err) => {
            this.$message.error('错误：' + err.message)
          })
      },
      singleDelete(record){
        const param = [ {id: record.id} ]
          leaveMessageDelete(param).then((res) => {
            console.log(res)
            if (res.success) {
              this.$message.success('删除成功')
              this.$refs.rostertable.refresh(true)
            } else {
              this.$message.error('删除失败：' + res.message)
            }
          }).catch((err) => {
            this.$message.error('删除错误：' + err.message)
          })
      },
    }
  }
</script>
